<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <script src='https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.js'></script> -->
    <script src="./js/echarts.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      const chartDom = document.getElementById("chart");
      /*
       * dark 暗色主题
       * renderer 默认是使用的 canvas渲染，也可以改成 svg渲染，如下
       */
      const chart = echarts.init(chartDom);
      chart.setOption({
        dataset: {
          source: [
            ["一季度", 100, 79, "分类1", 50],
            ["二季度", 112, 81, "分类2", 60],
            ["三季度", 96, 88, "分类3", 55],
            ["四季度", 123, 72, "分类4", 70],
          ],
        },
        title: {
          text: "Echart 多系列案例",
          subtext: "数据可视化教程",
        },
        xAxis: {
          data: ["一季度", "二季度", "三季度", "四季度"],
        },
        yAxis: {},
        legend: {
          data: [
            {
              name: "分类",
              icon: "circle",
              textStyle: {
                color: "red",
              },
            },
            "折线图",
            "柱状图",
          ],
          left: 300,
        },
        grid: {
          top: 100,
          left: '10%',
          right: '10%',
          bottom: 100,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
            dataZoom: {
              yAxisIndex: false,
            },
            restore: {},
          },
        },
        dataZoom: [
          {
            show: true,
            start: 0,
            end: 100,
          },
        ],
        series: [
          {
            name: "分类",
            type: "pie",
            center: ["50%", 60], // 距左侧 50%，距上侧有60个像素
            radius: 35,
            encode: { itemName: 3, value: 4 },
          },
          {
            name: "折线图",
            type: "line",
            encode: { x: 0, y: 1 },
          },
          {
            name: "柱状图",
            type: "bar",
            encode: { x: 0, y: 2 },
          },
        ],
      });
    </script>
  </body>
</html>
